<template>
    <div class="footer">
        <div class="content">
            <div class="footer-top">
                <div class="footer-top-left">
                    <el-image class="qrcode" :src="require('@/assets/img/qrcode.png')"></el-image>
                    <el-image class="qrcode" :src="require('@/assets/img/qrcode1.png')"></el-image>
                    <div class="page-title">
                        <el-image class="footer-logo" :src="require('@/assets/img/footer-logo.png')"></el-image>
                        <div class="page-title-text">合成生物学竞赛</div>
                    </div>
                </div>
                <div class="footer-top-right">
                    <div class="help" :data-font="$i18n.locale">
                        <span class="help-title">{{ $t("footer.consultation") }}</span>
                        <span class="help-text">info@synbiochallenges.com</span>
                    </div>
                    <div class="help" :data-font="$i18n.locale">
                        <span class="help-title">{{ $t("footer.complaint") }}</span>
                        <span class="help-text">judge@synbiochallenges.com</span>
                    </div>

                </div>
            </div>
            <div class="footer-line"></div>
            <div class="footer-bottom">
                <div class="footer-bottom-left">
                    <div class="footer-bottom-left-text">
                        <span>粤ICP备18059912号-2</span>
                    </div>
                    <div class="footer-bottom-left-text mouse-active" @click="networkBackup" v-if="false">
                        <el-image class="s1" :src="require('@/assets/img/s1.png')"></el-image>
                        <span>京公安网备11010502044713号</span>
                    </div>
                </div>
                <div class="footer-bottom-right">
                    <!-- <span class="mouse-active" :data-font="$i18n.locale">{{ $t("footer.competitionRules") }}</span> -->
                    <span class="mouse-active" :data-font="$i18n.locale">{{ $t('footer.privacy') }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        networkBackup() {
            window.open("http://www.beian.gov.cn/portal/recordQuery/")
        }
    }
}
</script>


<style lang="less" scoped>
.footer {
    width: 100%;
    backdrop-filter: blur(10px);
    padding: 0.64rem 9.6rem 0.43rem 9.6rem;
    background: linear-gradient(to right, rgba(159, 34, 255, 0.75), rgba(38, 87, 255, 0.75));

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .footer-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .footer-top-left {
            display: flex;
            align-items: flex-start;

            .qrcode {
                width: 2.67rem;
                height: 2.67rem;
                margin-right: 0.43rem;
            }

            .page-title {
                height: 2.67rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .footer-logo {
                    width: 1.88rem;
                    height: 1.62rem;
                    margin-bottom: 0.32rem;
                }

                .page-title-text {
                    font-size: 0.64rem;
                    font-family: 'zcoolqingkehuangyouti-Regular', 'zcoolqingkehuangyouti';
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 0.96rem;
                    height: 0.96rem;
                    text-align: end;
                }
            }
        }

        .footer-top-right {
            display: flex;
            align-items: center;

            .help {
                margin-left: 0.85rem;
                display: flex;
                flex-direction: column;
            }

            .help-title {
                font-size: 0.48rem;
                font-weight: normal;
                color: #FFFFFF;
                line-height: 0.69rem;
                margin-bottom: 0.16rem;
            }

            .help-title[data-font='zh'] {
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            }

            .help-title[data-font='en'] {
                font-family: 'PingFangSC-Regular', 'PingFang SC';
            }

            .help-text {
                font-size: 0.48rem;
                font-family: 'Helvetica-Light', 'Helvetica';
                font-weight: 300;
                color: #FFFFFF;
                line-height: 0.69rem;
            }
        }

    }

    .footer-line {
        margin-top: 0.53rem;
        margin-bottom: 0.43rem;
        width: 100%;
        height: 0.03rem;
        background: #FFFFFF;
        backdrop-filter: blur(10px);
    }

    .footer-bottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .footer-bottom-left {
            display: flex;
            align-items: center;

            .footer-bottom-left-text {
                margin-right: 0.24rem;
                display: flex;
                align-items: center;

                .el-image {
                    width: 0.48rem;
                    height: 0.53em;
                    margin-right: 0.13rem;
                }

                span {
                    display: inline-block;
                    height: 0.75rem;
                    font-size: 0.48rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 0.75rem;
                }
            }

        }

        .footer-bottom-right {
            display: flex;
            align-items: center;

            span {
                display: inline-block;
                margin-left: 0.43rem;
                height: 0.75rem;
                font-size: 0.48rem;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 0.75rem;
            }

            span[data-font='zh'] {
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            }

            span[data-font='en'] {
                font-family: 'PingFangSC-Regular', 'PingFang SC';
            }
        }

    }
}
</style>